<template>
	<div>
		<Title>赛事管理</Title>
    <el-table
      v-loading="!cptts"
      :data="cptts?cptts:[]"
      height="calc(100vh - 150px)"
      :row-class-name="({row})=>`row-state-${row.state}`"
      :header-cell-style="{background:'#fafafa'}"
      class="w-full"
      :row-key="row=>`httable-${row.id}`"
    >
    <!-- expand-row-keys -->
      <el-table-column type="expand"
        :filters="typefilters"
        :filter-method="(value,row)=>value == row.type"
      >
        <template v-slot="{ row,$index }">
          <div class="flex flex-col md:flex-row items-center md:items-start md:justify-between">
            <el-avatar class="flex-shrink-0" shape="square" :size="boxheight" :src="row.url" />
            <div 
              class="flex flex-col justify-between px-3 overflow-y-auto"
              :style="{height:`${boxheight}px`}"
            >
              <p>
                <template v-if="row.state < 5">
                  <i class="rounded shake-little el-icon-edit p-2 mx-1 cursor-pointer icon icon-ok" title="编辑" />
                  <i 
                    @click="$router.push({name:'htcppro'})"
                    v-if="row.state == 3" class="rounded shake-little el-icon-tickets p-2 mx-1 cursor-pointer icon icon-ok" title="分组" />
                </template>
                <i v-else
                  @click="$router.push({name:'htcpintegral'})"
                  class="el-icon-caret-right rounded shake-little p-2 mx-1 cursor-pointer icon icon-ok" title="开始" />
                
                <i @click="()=>{}" class="rounded shake-little el-icon-share p-2 mx-1 cursor-pointer icon icon-ok" title="分享" />
                <!-- <i @click="()=>{}" class="rounded shake-little el-icon-plus p-2 mx-1 cursor-pointer icon icon-ok" /> -->
                <i @click="delcptt(row.id,$index)" class="rounded shake-little el-icon-delete p-2 mx-1 cursor-pointer icon icon-ok" title="删除" />
              </p>
              <el-form
                label-position="left" 
                inline 
                class="demo-table-expand"
              >
                <el-form-item label="比赛名称">
                  <span>{{ row.name }}</span>
                </el-form-item>
                <el-form-item label="比赛种类">
                  <span>{{ CodeToType[row.type] }}</span>
                </el-form-item>
                <el-form-item label="报名截止时间">
                  <span>{{ row.overtime }}</span>
                </el-form-item>
                <el-form-item label="比赛开始时间">
                  <span>{{ row.goingtime }}</span>
                </el-form-item>
                <el-form-item label="比赛简介">
                  <span>{{ row.info }}</span>
                </el-form-item>
                <el-form-item v-if="/[3,5]/.test(row.state)" label="比赛分组">
                  <span>{{row.isGrouping? '已分组':'未分组'}}</span>
                </el-form-item>
              </el-form>
            </div>
            
            <div 
              :style="{height:`${boxheight}px`,width:`${boxheight}px`}"
              :class="`items-${row.applays?'start':'center'}`"
              class="flex flex-shrink-0 justify-center overflow-y-auto"
            >
              <div 
                v-if="row.applays" 
                class="w-full infinite-list-wrapper" 
                style="overflow:auto"
              >
                <ul
                  class="list"
                  v-infinite-scroll="loadApplay(row)"
                  infinite-scroll-disabled="disabled">
                  <li 
                    :key="`applay-${item.id}`"
                    v-for="item in row.applays.slice(0,row.count)"
                    class="applay-list-item"
                  >{{ item.name }}
                    <i 
                    class="hidden rounded shake-little el-icon-delete p-2 mx-1 cursor-pointer icon icon-ok" />
                  </li>
                  <li class="applay-list-item load" v-if="applayloading">加载中<i class="el-icon-loading" /></li>
                  <li class="applay-list-item load" v-if="row.applays.length <= row.count">没有更多了</li>
                </ul>
              </div>
              <el-button v-else @click="getApplay(row.id,$index)">点击加载报名详情</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="比赛名称" />
      <el-table-column prop="state" label="状态"
        :filters="Object.freeze([
          {text:'报名中',value:2},
          {text:'未开始',value:3},
          {text:'待开始',value:5},
        ])"
        :filter-method="(value,row)=>value === row.state"
        :formatter="(row, column, cellValue)=>CodeToState[cellValue]"
      />
      <el-table-column label="是否开放">
      <template v-slot="{ row }">
        <div class="show-svg">
          <svg v-if="row.isShow" class="inline cursor-pointer" viewBox="0 0 1024 1024" width="24" height="24"><path d="M896.426667 436.906667C841.386667 345.6 718.592 192 511.744 192c-206.421333 0-329.685333 153.6-384.298667 244.906667a145.237333 145.237333 0 0 0 0 149.76c54.613333 91.733333 177.877333 245.333333 384.298667 245.333333 206.848 0 329.685333-153.6 384.682667-245.333333 13.653333-23.04 20.906667-48.64 20.906666-74.666667 0-26.026667-7.253333-51.626667-20.906666-75.093333z m-384.682667 267.093333A192.256 192.256 0 0 1 319.829333 512c0-105.813333 86.144-192 191.914667-192s191.914667 86.186667 191.914667 192-86.186667 192-191.914667 192z m106.197333-197.973333c0.426667 2.133333 0.426667 3.84 0.426667 5.973333a106.666667 106.666667 0 0 1-106.666667 106.666667 106.666667 106.666667 0 0 1 0-213.333334c26.026667 0 49.92 9.386667 68.266667 24.746667-14.933333 6.826667-25.6 21.76-25.6 39.253333 0 23.466667 19.2 42.666667 42.666667 42.666667 7.68 0 14.933333-2.133333 20.906666-5.973333z" fill="#9254DE" p-id="4215"></path><path d="M798.293333 312.661333c43.989333 42.24 76.373333 88.106667 98.133334 124.245334 10.88 18.688 17.706667 38.741333 20.053333 59.306666l-328.533333 328.533334a396.8 396.8 0 0 1-76.202667 7.253333 387.498667 387.498667 0 0 1-186.026667-46.805333l101.077334-101.077334c25.6 12.714667 54.442667 19.882667 84.906666 19.882667 105.813333 0 191.957333-86.186667 191.957334-192 0-30.464-7.125333-59.306667-19.84-84.906667z m-180.352 193.365334c0.426667 2.133333 0.426667 3.84 0.426667 5.973333a106.666667 106.666667 0 0 1-124.586667 105.173333l105.258667-105.344 3.669333-0.213333a37.845333 37.845333 0 0 0 15.232-5.546667z" fill="#9D65E1" p-id="4216"></path><path d="M321.322667 487.808a192.298667 192.298667 0 0 0 105.472 196.309333l-101.12 101.077334c-69.632-37.504-122.496-91.861333-160-141.653334zM511.744 405.333333c26.026667 0 49.92 9.386667 68.266667 24.746667-14.933333 6.826667-25.6 21.76-25.6 39.253333 0 23.466667 19.2 42.666667 42.624 42.666667l1.962666-0.170667-105.173333 105.344a106.752 106.752 0 0 1 17.92-211.84z m94.208-202.112c79.530667 19.541333 143.189333 62.208 192.341333 109.397334l-114.474666 114.432a192.213333 192.213333 0 0 0-196.224-105.557334z" fill="#A776E4" p-id="4217"></path><path d="M511.744 192c33.621333 0 64.981333 4.053333 94.250667 11.221333l-118.357334 118.272a192.469333 192.469333 0 0 0-166.314666 166.314667l-155.690667 155.733333a631.125333 631.125333 0 0 1-38.186667-56.874666 145.237333 145.237333 0 0 1 0-149.76C182.058667 345.6 305.322667 192 511.744 192z" fill="#BD98EB" p-id="4218"></path></svg>
          <svg v-else class="inline cursor-pointer" viewBox="0 0 1024 1024" width="24" height="24"><path d="M896.426667 436.949333a611.584 611.584 0 0 0-112.896-136.618666l99.498666-99.498667a42.666667 42.666667 0 1 0-60.330666-60.330667l-682.453334 682.666667a42.666667 42.666667 0 1 0 60.330667 60.330667l108.117333-108.16a389.674667 389.674667 0 0 0 202.965334 56.704c206.037333 0 329.301333-153.6 384.725333-244.906667 27.733333-46.506667 27.733333-103.68 0-150.186667z m-384.768 267.093334a190.037333 190.037333 0 0 1-101.717334-29.994667l62.848-62.890667c12.032 4.736 25.088 7.552 38.826667 7.552a106.666667 106.666667 0 0 0 106.666667-106.666666c0-2.133333 0-3.413333-0.426667-5.546667-5.973333 3.413333-13.226667 5.546667-20.906667 5.546667a41.472 41.472 0 0 1-19.669333-5.418667l96.469333-96.512a190.293333 190.293333 0 0 1 29.824 101.930667c0 105.813333-86.101333 192-191.914666 192z m-327.552-37.546667c-20.906667-24.746667-40.106667-51.626667-56.746667-79.36a146.986667 146.986667 0 0 1-0.426667-150.186667c55.466667-91.306667 179.157333-244.906667 384.725334-244.906666 39.68 0 78.08 5.546667 117.333333 17.493333 7.253333 2.133333 12.8 8.106667 14.933333 15.36 1.706667 7.253333-0.426667 14.933333-5.973333 20.053333l-80.64 80.64c-14.506667-3.413333-29.866667-5.546667-45.653333-5.546666a192.256 192.256 0 0 0-186.368 238.08l-109.653334 109.653333c-4.266667 4.266667-9.386667 6.4-15.36 6.4h-0.853333a21.504 21.504 0 0 1-15.317333-7.68z" fill="#9254DE" p-id="5658"></path><path d="M797.610667 313.344a616.618667 616.618667 0 0 1 98.816 123.605333c11.008 18.517333 17.664 38.741333 19.925333 59.306667L587.946667 824.746667a394.368 394.368 0 0 1-76.288 7.338666c-65.792 0-127.957333-15.872-185.813334-46.933333l101.290667-101.333333c25.472 12.8 54.016 20.266667 84.522667 20.266666 105.813333 0 191.957333-86.186667 191.914666-192 0-30.421333-7.338667-59.093333-20.053333-84.650666z m-179.754667 193.152c0.426667 2.133333 0.426667 3.413333 0.426667 5.546667a106.666667 106.666667 0 0 1-124.501334 105.088L599.04 512a42.410667 42.410667 0 0 0 18.773333-5.504z" fill="#9D65E1" p-id="5659"></path><path d="M822.698667 140.501333a42.666667 42.666667 0 1 1 60.330666 60.330667L783.530667 300.373333c4.821333 4.266667 9.514667 8.661333 14.08 13.013334l-114.133334 114.048a198.357333 198.357333 0 0 0-9.728-17.28l-96.469333 96.512a41.472 41.472 0 0 0 21.76 5.376l-105.258667 105.130666a109.525333 109.525333 0 0 1-20.992-5.973333l-62.848 62.890667c5.546667 3.498667 11.306667 6.741333 17.194667 9.728L325.845333 785.066667a427.093333 427.093333 0 0 1-17.152-9.728l-108.117333 108.16a42.538667 42.538667 0 0 1-60.330667 0 42.666667 42.666667 0 0 1 0-60.330667zM319.744 512.042667c0 15.786667 1.706667 31.146667 5.546667 46.08l-109.653334 109.653333c-4.266667 4.266667-9.386667 6.4-15.36 6.4h-0.853333a21.504 21.504 0 0 1-15.317333-7.68 599.04 599.04 0 0 1-18.474667-22.997333l155.605333-155.605334a192.853333 192.853333 0 0 0-1.493333 24.149334z m309.248-302.506667c7.253333 2.133333 12.8 8.106667 14.933333 15.36 1.706667 7.253333-0.426667 14.933333-5.973333 20.053333l-80.64 80.64a192.64 192.64 0 0 0-69.717333-4.053333L605.866667 203.221333c7.68 1.877333 15.36 3.968 23.125333 6.314667z" fill="#A776E4" p-id="5660"></path><path d="M511.658667 192.042667c31.872 0 62.890667 3.584 94.208 11.178666l-118.272 118.314667a192.469333 192.469333 0 0 0-166.357334 166.4l-155.562666 155.605333a611.669333 611.669333 0 0 1-38.314667-56.405333 146.986667 146.986667 0 0 1-0.426667-150.186667c55.466667-91.306667 179.157333-244.906667 384.725334-244.906666z" fill="#BD98EB" p-id="5661"></path></svg>
          <span>{{(row.isShow?'':'不')+'开放'}}</span><el-button type="text" class="p-0">修改</el-button>
        </div>
      </template>
      </el-table-column>
    </el-table>
	</div>
</template>

<script>
import setShow from './modules/cpttSetShow'
import { CodeToState,CodeToType } from '@/conf'
import { getMyCptt,delcptt } from '@/api/htcp'
import { getApplay } from '@/api/cpttApis'
import vue from 'vue'
export default{
  components:{
  	setShow,
  },
	data(){
		return{
      boxheight:Object.freeze(240),
			disabled:false,
			noGroup:[],
      cptts:false,
      tableHeight:600,
      CodeToState:Object.freeze(CodeToState),
      CodeToType:Object.freeze(CodeToType),
      applayloading:false,
      handleClick(row) {
        console.log(row);
      },
		}
	},
	async created() {
    const { cptts } = await getMyCptt().catch(()=>{})
    console.log({cptts})
    setTimeout(()=>{
      this.cptts = cptts
    },500)
	},
  methods:{
    async getApplay(id,index){
      const { applays } = await getApplay({id})
      // debugger
      const item = this.cptts[index]
      item.applays = applays
      item.count = 5
      this.$set(this.cptts,index,item)
    },
    async delcptt(id,index){
      await delcptt({id})
      this.cptts.splice(index,1)
    },
    loadApplay(row,index){
      if(row.applays.length <= row.count) return
      this.applayloading=true
      setTimeout(()=>{
        row.count += 5
        this.applayloading = false
      },2000)
    }
  },
  computed:{
    typefilters(){
      const info = []
      for(const value in CodeToType)
        info.push({text:CodeToType[value],value})
      return info
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
//table
::v-deep .cell{
  white-space: nowrap !important;
  display: flex;
  align-items: center;
}
::v-deep .row-state{
  &-0{
    background-color: #fff;
  }
  &-2{
    background-color: #87ceeb3d;
  }
  &-3{
    background-color: #ffff0061;
  }
  &-5{
    background-color: #ffa50038;
  }
}

.show-svg{
  display: flex;
  .el-button{
    display: none;
  }
  &:hover .el-button{
    display: block;
    animation: show .5s;
  }
}
::v-deep .demo-table-expand {
  // font-size: 0;
  .el-form-item__label{
    width: 100px;
    color: #99a9bf;
  }
  .el-form-item {
    // margin-right: 0;
    // margin-bottom: 0;
    margin:0;
    width: 100%;
  }
}
.applay-list-item{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #e8f3fe;
  margin: 10px;
  color: #7dbcfc;
  cursor: pointer;
  &:hover .hidden{
    display: inline-block;
  }
  &.load{
    color: #000;
    background: #0000;
  }
}
@keyframes show{
	from{opacity: 0}
	to{opacity: 1}
}
</style>
